<template>
	<view style="width: 100%;height: auto;background: white;">
		<view>
			<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @clear="clear" placeholder="搜索">
			</uni-search-bar>
		</view>
		<view style="">
			<view class="" style="margin-left: 5rpx;height: 180rpx;">
				<uni-grid :column="5" :highlight="true" @change="change" :showBorder="false">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<!-- <uni-icons type="image" :size="30" color="#777" /> -->
							<image :src="icons[index]" style="width: 80rpx;height: 80rpx;"></image>
							<text class="text"
								style="font-size: 24rpx;color: #000;font-weight: 500;">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="singleShow">
				<view class="titleView">
					<view class="subtitle">
						学员作品
					</view>
					<view class="lookall" @click="xyzp()">
						查看全部
						<image :src="moreicon"></image>
					</view>
				</view>

				<view class="imgstyle">
					<uni-row class="demo-uni-row" style="width: 100%;" :gutter="10">
						<uni-col :span="8" v-for="(item, index) in homeObject.xueyuanzuopim" :index="index" :key="index"
							style="">
							<image :src="item.img_url" style="width: 100%;height: 340rpx;" mode="aspectFill"
								@click="toDetail(item)">
							</image>
							<view class="userview">
								<view class="username">
									<view class="name">
										{{item.name.length > 10 ? item.name.slice(0,9) + '..' : item.name}}
									</view>
									<view class="location">
										<image :src="locationicon"></image>
										<!-- {{item.city.split('省')[1]}} -->
										{{item.city.indexOf('省') != -1 ? item.city.split('省')[1].replace('市','') : item.city.replace('市','')}}
									</view>
								</view>
								<view class="banji">
									{{item.class}}
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="singleShow">
				<view class="titleView">
					<view class="subtitle">
						学员VCR
					</view>
					<view class="lookall" @click="vcr()">
						查看全部
						<image :src="moreicon"></image>
					</view>
				</view>

				<view class="imgstyle">
					<uni-row class="demo-uni-row" style="width: 100%;" :gutter="10">
						<uni-col :span="12" v-for="(item, index) in homeObject.vcr" :index="index" :key="index">

							<view @click="toUserInfo(item)">
								<video class="videostyle" :id="'video6-'+index" :src="item.img_url"
									:poster="item.img_url + '?vframe/jpg/offset/00/w200/h300'" lazy-load playsinline
									webkit-playsinline :show-fullscreen-btn="false" :enable-progress-gesture="false"
									@play="playVideo('video6-' + index, item)" object-fit=" cover" controls></video>
								<view class="userview">
									<view class="username">
										<view class="name">
											{{item.name}}
										</view>
										<view class="location">
											<image :src="locationicon"></image>
											{{item.city}}
										</view>
									</view>
									<view class="banji">
										{{item.class}}
									</view>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="singleShow">
				<view class="titleView">
					<view class="subtitle">
						学员故事
					</view>
					<view class="lookall" @click="xygs()">
						查看全部
						<image :src="moreicon"></image>
					</view>
				</view>

				<view class="imgstyle">
					<uni-row class="demo-uni-row" style="width: 100%;" :gutter="0">
						<uni-col :span="24" v-for="(item, index) in homeObject.story" :index="index" :key="index">
							<view style="display: grid;" @click="toStory(item)">
								<image :src="item.img_url"
									style="width: 100%;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;"
									mode="widthFix">
								</image>
								<view
									style="font-size: 28rpx;background: #fff;height: auto;border-bottom-left-radius: 16rpx;border-bottom-right-radius: 16rpx;padding: 10rpx;">
									<view style="font-weight: 600;">
										{{item.message.split('丨')[0]}}
										<span style="font-weight: normal;">
											丨{{item.message.split('丨')[1]}}
										</span>
									</view>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="singleShow">
				<view class="titleView">
					<view class="subtitle">
						服务见证
					</view>
					<view class="lookall" @click="fwjz()">
						查看全部
						<image :src="moreicon"></image>
					</view>
				</view>

				<view class="imgstyle">
					<uni-row class="demo-uni-row" style="width: 100%;" :gutter="10">
						<uni-col :span="8" v-for="(item, index) in homeObject.fuwu" :index="index" :key="index"
							style="">
							<image :src="item.img_url" style="width: 100%;" mode="widthFix" @click="toFwjz(item)">
							</image>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="singleShow">
				<view class="titleView">
					<view class="subtitle">
						俱乐部
					</view>
					<view class="lookall" @click="club()">
						查看全部
						<image :src="moreicon"></image>
					</view>
				</view>

				<view class="imgstyle">
					<uni-row class="demo-uni-row" style="width: 100%;" :gutter="10">
						<uni-col :span="24" v-for="(item, index) in homeObject.julebu" :index="index" :key="index"
							style="">
							<image :src="item.img_url" style="width: 100%;border-radius: 16rpx;" mode="widthFix"
								@click="toJlb(item)">
							</image>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button @click="toTop()">
				回到顶部↑
			</button>
		</view>
		<view class="des_detail" v-if="isBlackApp()">
			<open-app :shareUrl="shareUrl"></open-app>
		</view>
		<!-- 		<view class="des_detail">
			<open-app :shareUrl="shareUrl"></open-app>
		</view> -->
	</view>
</template>
<script>
	const app = getApp();
	const comUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";
	import openApp from './components/openApp.vue';

	import {
		getStudentProductFirstData
	} from '@/api/case.js';

	import {
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {
			openApp
		},
		data() {
			return {
				searchValue: '',
				icons: ['../../static/images/usercase/xyzp.png', '../../static/images/usercase/vcr.png',
					'../../static/images/usercase/xygs.png', '../../static/images/usercase/fwjz.png',
					'../../static/images/usercase/club.png'
				],
				shareUrl: 'https://www.mayimae.com/qz/pages/usercase/index',
				moreicon: '../../static/images/usercase/morearrow.png',
				locationicon: '../../static/images/usercase/dingwei.png',
				img: 'https://pic.mae.vip//crmebimage/public/product/2025/09/06/ea5d9b3d1e934843b2ccde824c634fa9bprsuegg1x.jpg',
				list: [{
					name: '学员作品'
				}, {
					name: '学员VCR'
				}, {
					name: '学员故事'
				}, {
					name: '服务见证'
				}, {
					name: '俱乐部'
				}],
				userId: '-1',
				token: '-1',
				phone: '13012562102',
				platform: uni.getSystemInfoSync().platform, //手机类型
				allVideoId: [],
				homeObject: {},
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;
		},
		onPageScroll(res) { //、、、、、
			let that = this;
			//console.log('----***  ' + res.scrollTop)
		},
		onReachBottom() {
			let that = this;
		},
		onLoad() {
			let that = this;

			let locatiojUrl = window.location.href;

			//let locatiojUrl =
			//	'http://10.10.8.15:8080/qz/?phone=13012562102&token=1202bdc5effd1ecbbd447deec7a6f78b&userId=337538';
			if (locatiojUrl.indexOf('?') != -1 && locatiojUrl.indexOf('userId') != -1) {
				that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);
				that.token = decodeURI(that.jqueryUrl(locatiojUrl).token);
				that.phone = decodeURI(that.jqueryUrl(locatiojUrl).phone);
			}

			that.loginH5();
			that.getData();

			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '38',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '38' + '&shareurl=' + that.shareUrl;
				}
			}
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		onShow() {
			let that = this;
			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '38',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '38' + '&shareurl=' + that.shareUrl;
				}
			}
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.navTitle.postMessage({
						'name': '用户案例'
					});
				}
			}
			if (that.platform == 'android') {
				window.location.href = 'navTitle&name=' + '用户案例';
			}
		},
		methods: {
			search(res) {
				// uni.showToast({
				// 	title: '搜索：' + res.value,
				// 	icon: 'none'
				// })
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {

			},
			blur(res) {

			},
			focus(e) {

			},
			cancel(res) {

			},
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			getData() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getStudentProductFirstData(p).then(res => {
					if (res.code == 0) {
						that.homeObject = {};
						that.homeObject = res.data;
					}
				})
			},
			toDetail(item) {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/workdetail?userId=' + that.userId + '&token=' + that.token +
						'&workId=' + item.id,
				})
			},
			toUserInfo(item) {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/userinfo?userId=' + that.userId + '&token=' + that.token +
						'&studentid=' + item.student_id,
				})
			},
			toStory(item) {
				let that = this;
				// uni.navigateTo({
				// 	animationType: animationType.type,
				// 	animationDuration: animationType.duration,
				// 	url: '/pages/usercase/storydetail?userId=' + that.userId + '&token=' + that.token +
				// 		'&storylink=' + item.jump_url,
				// })
				window.location.href = decodeURIComponent(item.jump_url)
			},
			toJlb(item) {
				let that = this;
				// uni.navigateTo({
				// 	animationType: animationType.type,
				// 	animationDuration: animationType.duration,
				// 	url: '/pages/usercase/storydetail?userId=' + that.userId + '&token=' + that.token +
				// 		'&storylink=' + decodeURIComponent(item.jump_url),
				// })
				//window.open('https://www.mae.vip/MaYiAPP1.2/Section/showContent?cs_id=490', '_blank');
				//console.log(item.jump_url)
				console.log(decodeURIComponent(item.jump_url))

				window.location.href = decodeURIComponent(item.jump_url)
				//window.open('https://mp.weixin.qq.com/s/iYfWqznKMaqnrskM2b8mug')
			},
			toFwjz(item) {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/witnessdetail?userId=' + that.userId + '&token=' + that.token +
						'&workId=' + item.id,
				})
			},
			xyzp() {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/work?userId=' + that.userId + '&token=' + that.token,
				})
			},
			vcr() {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/vcr?userId=' + that.userId + '&token=' + that.token,
				})
			},
			xygs() {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/story?userId=' + that.userId + '&token=' + that.token,
				})
			},
			fwjz() {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/witness?userId=' + that.userId + '&token=' + that.token,
				})
			},
			club() {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/club?userId=' + that.userId + '&token=' + that.token,
				})
			},
			change(e) {
				let that = this;
				let {
					index
				} = e.detail
				console.log(index)
				if (index == 0) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/usercase/work?userId=' + that.userId + '&token=' + that.token,
					})
				}
				if (index == 1) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/usercase/vcr?userId=' + that.userId + '&token=' + that.token,
					})
				}
				if (index == 2) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/usercase/story?userId=' + that.userId + '&token=' + that.token,
					})
				}
				if (index == 3) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/usercase/witness?userId=' + that.userId + '&token=' + that.token,
					})
				}
				if (index == 4) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/usercase/club?userId=' + that.userId + '&token=' + that.token,
					})
				}
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 假设页面很长，滚动到一个很大的值，从而滚动到底部
					duration: 100 // 滚动动画时长
				});
			},
			playVideo(id, url) {
				let that = this;

				for (let i = 0; i < that.allVideoId.length; i++) {
					if (that.allVideoId[i] != id) {
						uni.createVideoContext(that.allVideoId[i].toString()).pause(); // 暂停其他视频
					} else {
						console.log(id)
						if (that.platform == 'ios') {
							uni.createVideoContext(that.allVideoId[i].toString()).play(); // 内联播放

						} else {
							uni.createVideoContext(that.allVideoId[i].toString()).play(); // 内联播放
						}
					}
				}
			},
			loginH5() {
				let that = this;
				loginMobile({
						phone: that.phone,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);

					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background: white !important;
	}

	.uni-searchbar {
		padding-bottom: 0;
	}

	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		//margin-top: -1500px;
		width: 100%;
		height: 100vh;
		//background: rgba(95, 157, 228, 0.5);
		background: transparent;
	}

	.userview {
		height: 100rpx;
		width: 100%;
		background: #fff;

		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		margin-top: -10rpx;
		display: grid;

		.username {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10rpx;
			width: calc(100% - 20rpx);
			height: 30rpx;

			.name {
				height: 100%;
				color: #000000;
				font-weight: 500;
				font-size: 24rpx;
			}



			.location {
				image {
					width: 26rpx;
					height: 24rpx;
				}

				margin-top: 2rpx;
				height: 100%;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #666666;
			}
		}

		.banji {
			padding-left: 10rpx;
			color: #333333;
			font-size: 22rpx;
		}
	}

	.videostyle {
		width: 100%;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 200rpx;

		image {
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
		}
	}

	.singleShow {
		margin: 10rpx;
		width: calc(100% - 20rpx);
		background: rgb(252, 246, 237);
		border-radius: 10rpx;
		height: auto;
		padding-bottom: 20rpx;

		.titleView {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			padding-top: 20rpx;
		}

		.subtitle {
			font-size: 30rpx;
			font-weight: 600;
		}

		.lookall {
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
			color: #ea5550;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}

		.imgstyle {
			width: calc(100% - 20rpx);
			margin: 0rpx 10rpx;
		}
	}



	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}


	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.bottom {
		height: 100%;
		height: 140rpx;
		background: #f5f5f5;
		display: flex;
		justify-content: center;

		button {
			background: #fff;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
		}
	}
</style>